
import { useState,useContext,createContext,useEffect } from "react";
import className from "classname";
// commentList.css 引入
import "./commentList.css";
import { useRef } from "react";
import { v4 as uuidV4 } from "uuid";
import * as dayjs from 'dayjs'
function CommentApp({commentList}) {
  const MsgContext = createContext();
  const showIdMsg =useContext(MsgContext);
  console.log(showIdMsg)
  const [datalist, setDatalist] = useState([])
  // const h4Style = { color: "red" ,fontSize:"14px"};
  const [type, setType] = useState("new");
  const [text, setText] = useState("");
  const inputRef = useRef("");
  // 组件挂载时，自动获取焦点
    const menuName = "评论中心";
    const userId = 1;
    const userName = "张三";
   const typeList = [{name:"最新",value:"new"},{name:"最热",value:"hot"}];
   useEffect(()=>{
    inputRef.current.focus();
    setDatalist([...commentList])
   },[])
   const handTabClick=(str)=>{
      setType(str)
      let arr = [...datalist]
      if(str==="new"){
        arr.sort((a,b)=>{
          return new Date(b.date).getTime()-new Date(a.date).getTime()
        })
      }else if(str==="hot"){
        arr.sort((a,b)=>{
          return b.zan-a.zan
        })
      }
      setDatalist(arr);
   }
   const getDom = ()=>{
      console.dir(inputRef.current);
   }
   const inputChange=(e)=>{
      setText(e.target.value)
      handTabClick(type)
   }
    const del=(index)=>{
        let arr =[...datalist]
        arr.splice(index,1);
        console.log(index);
        setDatalist(arr);
        // commentList = arr;
    }
    const save=()=>{
        //保存
        console.log("save text：");
        let arr =[...datalist]
        // 从顶部存入
        arr.unshift({
          rid: uuidV4(),
        
          id: 1,
    name: "张三",
    content: text,
    zan: 1,
    date: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
        })
        setText("");
        setDatalist(arr);
    }
  return (
    <div className="">
      <h2>{menuName}</h2> <span>({datalist.length})</span>
      <div>
        <h3>
            <span>ID:{userId}</span> <span>  {userName}</span>
        </h3>
        <h4 ref={inputRef} onClick={getDom}>只能删除ID是自己的评论</h4>
        <div>排序方式：{type&& <span>-{type}</span>} {typeList.map((item,index) => (
            <span key={index} onClick={()=>{handTabClick(item.value)}}><button className={className("btn",{active:type===item.value}) }>{item.name}</button></span>
        ))} 
        </div>
        <input type="text" onChange={inputChange} placeholder="请输入评论" value={text}/> 
        <button onClick={save}>评论</button>
      </div>
      <ul>
        {datalist.map((item,index) => (
          <li key={item.index}>
                <div>
                    <span>{item.name}:</span>  <span>{item.content}</span>
                    <p>
                        <span>{item.date}</span>  <span> 赞:{item.zan}</span> { userId===item.id&& <span> <a onClick={()=>{del(index)}}>删除</a> </span>}
                    </p>
                </div>
            </li>
        ))}
      </ul>
    </div>
   
  );
}

export default CommentApp;
